<template>
    <a-modal :title="(createSend ? $t('Add-new') : $t('Edit')) + $t('Sender-information')" v-model='isShow'
        @cancel='handleCancel' width='64%' @ok='handleConfirm' :cancelText="$t('Cancel')" :okText="$t('Sure')"
        :maskClosable='false' v-dragModal>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
            labelAlign="left">
            <!-- <a-spin :spinning="loading"> -->
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-model-item :label="'SNMP' + $t('Agreement') + ':'" prop="agreement">
                        <span>{{ snmpValue }}</span>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <div v-if="snmpValue === 'v1/v2c'" class="mb-60">
                <a-col :span="12">
                    <a-form-model-item :label="$t('团体字') + ':'" prop="community">
                        <a-input v-model="form.community" :placeholder="$t('Enter') + $t('团体字')" />
                    </a-form-model-item>
                </a-col>
            </div>
            <div v-else>
                <a-row :gutter="16">
                    <a-col :span="12">
                        <a-form-model-item :label="'USM' + ' User' + ':'" prop="user_name">
                            <a-input v-model="form.user_name" :placeholder="$t('Enter')" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item :label="$t('Security-level') + ':'" prop="protocol_type">
                            <a-select v-model="form.protocol_type" :placeholder="$t('Choose') + $t('Security-level')">
                                <a-select-option v-for="item of levelList" :value="item.value" :key="item.value">
                                    {{ item.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>

                <div v-if="form.protocol_type !== 1">
                    <div class="title">{{ $t('Authentication-Protocols') }}</div>

                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item :label="$t('Authentication-algorithms') + ':'" prop="auth_type">
                                <a-select v-model="form.auth_type"
                                    :placeholder="$t('Choose') + $t('Authentication-algorithms')">
                                    <a-select-option v-for="item of algList" :value="item.value" :key="item.value">
                                        {{ item.label }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item :label="$t('Authentication-password') + ':'" prop="auth_key">
                                <a-input-password v-model="form.auth_key" :placeholder="$t('Enter') + $t('Password')" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>

                    <div v-if="form.protocol_type === 3">
                        <div class="title">{{ $t('Encryption-protocols') }}</div>

                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item :label="$t('Encryption-algorithms') + ':'" prop="priv_type">
                                    <a-select v-model="form.priv_type"
                                        :placeholder="$t('Choose') + $t('Encryption-algorithms')">
                                        <a-select-option v-for="item of encrylList" :value="item.value"
                                            :key="item.value">
                                            {{ item.label }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="$t('Encrypt-passwords') + ':'" prop="priv_key">
                                    <a-input-password v-model="form.priv_key"
                                        :placeholder="$t('Enter') + $t('Password')" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                    <div class="title">{{ $t('Engine') + ' ID' }}</div>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item :label="$t('Engine') + 'ID' + ':'" prop="engine_id">
                                <a-input v-model="form.engine_id" :placeholder="$t('Enter')" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </div>
            </div>

            <!-- </a-spin> -->
        </a-form-model>
    </a-modal>

</template>

<script>
import EmptyData from '@/components/common/EmptyData'


export default {
    name: '',
    components: {},
    data() {
        return {
            loading: false,
            isShow: false,
            snmpValue: 'v3',
            createSend: true,
            labelCol: { span: 5 },
            wrapperCol: { span: 17 },
            form: {
                agreement: undefined,
                community: '',
                user_name: '',
                protocol_type: 1,
                auth_type: '',
                priv_type: '',
                auth_key: '',
                priv_key: '',
                engine_id: '',
            },
            levelList: [{ value: 1, label: 'noAuthNoPriv' }, { value: 2, label: 'authNoPriv' }, { value: 3, label: 'authPriv' }],
            algList: [{ value: 1, label: 'MD5' }, { value: 2, label: 'SHA' }, { value: 3, label: 'SHA256' }, { value: 4, label: 'SHA384' }, { value: 5, label: 'SHA512' }],
            encrylList: [{ value: 1, label: 'DES' }, { value: 2, label: 'AES' }, { value: 3, label: 'AES256' }],
            defaultSetting: { emptyText: <EmptyData /> },
            levelDict: { //修改成这样
                noAuthNoPriv: 1,
                authNoPriv: 2,
                authPriv: 3,
            },
            snmpVesionDict:{
                'v1/v2': 0,
                'v3': 1
            },

            rules: {
                agreement: [],
                community: [
                    { required: true, message: this.$t('Enter') + this.$t('团体字'), trigger: 'blur' },
                    {pattern: /^[a-zA-Z0-9\-\_\+\*\/\!\@\#\$\%\^\&\(\)\=\{\}\[\]\;\:\'\"\,\<\.\>\?\|`~]{1,32}$/, message: this.$t('1~32个字符，由数字、英文字母和除空格外的特殊字符组成。'), trigger: 'blur'}
                ],
                user_name: [
                    { required: true, message: this.$t('Enter'), trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9]{1,32}$/, message: this.$t('1-32_up_lowercase_num'), trigger: 'blur' }

                ],
                protocol_type: [
                    { required: true, message: this.$t('Choose'), trigger: 'change' },
                ],
                auth_type: [
                    { required: true, message: this.$t('Choose') + this.$t('Authentication-algorithms'), trigger: 'change' },
                ],
                priv_type: [
                    { required: true, message: this.$t('Choose') + this.$t('Encryption-algorithms'), trigger: 'change' },
                ],
                auth_key: [
                    { required: true, message: this.$t('Enter') + this.$t('Password'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9]{8,12}$/, message: this.$t('8-12_up_lowercase_num'), trigger: 'blur' }
                ],
                priv_key: [
                    { required: true, message: this.$t('Enter') + this.$t('Password'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9]{8,12}$/, message: this.$t('8-12_up_lowercase_num'), trigger: 'blur' }
                ],
                engine_id: [
                    { required: true, message: this.$t('Enter') + this.$t('Engine') + 'ID', trigger: 'blur' },
                    { pattern: /^(?!0{10,64}$)(?![Ff]{10,64}$)[0-9A-Fa-f]{10,64}$/, message: this.$t('hexadecimal_number_10-64'), trigger: 'blur' }
                ],
            },

        }
    },

    methods: {
        // 提交
        async handleConfirm() {
            this.$refs.ruleForm.validate(async valid => {
                if (!valid) return
                // if (this.form.protocol_type !== this.levelDict['authPriv']) {
                //     this.form.priv_type = undefined
                //     this.form.priv_key = undefined
                //     if (this.form.protocol_type === this.levelDict['noAuthNoPriv']) {
                //         this.form.auth_type = undefined
                //         this.form.auth_key = undefined
                //         this.form.engine_id = undefined
                //     }
                // }

                const { protocol_type } = this.form;
                const { authPriv, noAuthNoPriv } = this.levelDict;

                // 如果协议类型不是authPriv，清除相关私有信息
                if (protocol_type !== authPriv) {
                    // 重置私有类型和密钥
                    this.form.priv_type = undefined;
                    this.form.priv_key = undefined;
                    
                    // 如果是无认证无权限类型，清除所有认证相关信息
                    if (protocol_type === noAuthNoPriv) {
                        this.form.auth_type = undefined;
                        this.form.auth_key = undefined;
                        this.form.engine_id = undefined;
                    }
                }

                if (this.createSend) { // 如果是新增
                    this.form.community = undefined
                    const { data } = await this.$api.alarm.appendSnmpV3Api(this.form)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag === 0) {
                        this.handleCancel()
                        this.$emit('get-list');
                    }
                } else {// 编辑
                    // SNMP版本是v1/v2
                    if (this.form.snmp_version === this.snmpVesionDict['v1/v2']) {
                        this.form = {
                            id: this.form.id,
                            community: this.form.community
                        }
                    } else { // SNMP版本是v3
                        delete this.form.addCountExpanded
                        delete this.form.countExpanded
                        delete this.form.send_switch
                        delete this.form.snmp_version
                    }
                    const { data } = await this.$api.alarm.editSnmpV3Api(this.form)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag === 0) {
                        this.handleCancel()
                        this.$emit('get-list');
                    }
                }
            });
        },

        // 取消
        handleCancel() {
            this.$refs['ruleForm'].resetFields();
            this.form = {
                agreement: undefined,
                community: '',
                user_name: '',
                protocol_type: 1,
                auth_type: '',
                priv_type: '',
                auth_key: '',
                priv_key: '',
                engine_id: '',
            };
            this.isShow = false
        },


    }
}
</script>

<style scoped>
.title {
    border-left: 3px solid #3590eb;
    padding-left: 8px;
    font-weight: bold;
    /* font-size: 16px; */
    color: #333333;
}
</style>